<template>
  <div class="editAccount">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <van-form @submit="onSubmit">
        <van-field v-model="accountName" required label="开户名称" placeholder="请输入开户名称"
          :rules="[{ required: true, message: '请输入开户名称' }]" />
        <van-field readonly clickable required name="picker" :value="accountType" label="开户类型" placeholder="请选择开户类型"
          :rules="[{ required: true, message: '请选择开户类型' }]" @click="showAccountTypePicker = true" />
        <van-popup v-model="showAccountTypePicker" position="bottom">
          <van-picker show-toolbar :columns="accountTypeList.map((item) => item.label)" @confirm="onAccountTypeConfirm"
            @cancel="showAccountTypePicker = false" />
        </van-popup>
        <van-field readonly clickable required name="picker" :value="areaName" label="地区" placeholder="请选择地区"
          :rules="[{ required: true, message: '请选择地区' }]" @click="showAreaPicker = true" />
        <van-popup v-model="showAreaPicker" position="bottom">
          <van-search v-model="selectValue" @input="selectValueChange" placeholder="请输入搜索关键词" />
          <van-picker show-toolbar :columns="areaList.map((item) => item.areaName)" @confirm="onConfirm"
            @cancel="() => { showAreaPicker = false, setAreaList() }" />
        </van-popup>
        <van-field readonly clickable required name="picker" :value="bankName" label="地区银行" placeholder="请选择地区银行"
          :rules="[{ required: true, message: '请选择地区银行' }]" @click="showBankPicker = true" />
        <van-popup v-model="showBankPicker" position="bottom">
          <van-search v-model="selectBankValue" @input="bankValueChange" placeholder="请输入搜索关键词" />
          <van-picker show-toolbar :columns="bankList.map((item) => item.bankName)" @confirm="onBankConfirm"
            @cancel="() => { showBankPicker = false, setBankList() }" />
        </van-popup>
        <van-field readonly clickable required name="picker" :value="bankBranchName" label="分支行名称" placeholder="请选择分支行"
          :rules="[{ required: true, message: '请选择分支行' }]" @click="showbankBranchPicker = true" />
        <van-popup v-model="showbankBranchPicker" position="bottom">
          <van-search v-model="selectBankBranchValue" @input="bankValueBranchChange" placeholder="请输入搜索关键词" />
          <van-picker show-toolbar :columns="bankBranchList.map((item) => item.bankBranchName)"
            @confirm="onbankBranchConfirm" @cancel="() => { showbankBranchPicker = false, setBankBranchList() }" />
        </van-popup>
        <van-field v-model="accountNumber" required label="卡号" placeholder="请输入卡号" :rules="[
      { required: true, message: '请输入卡号' },
      {
        validator: (value, rule) => checkBankNumber(value, rule),
        message: '卡号只能为数字',
      },
    ]" />
        <van-field v-model="contactPhone" required label="联系方式" placeholder="请输入联系地址" :rules="[
      { required: true, message: '请输入联系地址' },
      {
        validator: (value, rule) => phoneNumberRight(value, rule),
        message: '请输入正确的手机号码',
      },
    ]" />
        <van-field v-model="certificateNumber" required label="证件号码" placeholder="请输入证件号码" :rules="[
      { required: true, message: '请输入证件号码' },
      // {
      //   validator: (value, rule) => checkDocument(value, rule),
      //   message: '请输入正确的证件号码',
      // },
    ]" />
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
        <div style="margin: 16px 0">
          <van-button block native-type="button" @click="() => $router.push('/bankAccount')">取消</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
const regExp = /^\d+$/;
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
import { AccountTypeList } from "@/utils/options";
import { getValue, getLabel } from "@/utils/func";
export default {
  computed: {
    bank() {
      const bank = localStorage.getItem("bank");
      if (bank) {
        return JSON.parse(bank);
      }
      return {};
    },
    hasBankId() {
      return !!this.bank.bankAccountId || this.bank.bankAccountId === 0;
    },
    title() {
      if (!this.hasBankId) {
        return "新增银行账户";
      }
      return "编辑银行账户";
    },
  },
  watch: {
    areaName: {
      handler() {
        this.getBankBranchList();
      },
      immediate: true,
    },
    bankName: {
      handler() {
        this.getBankBranchList();
      },
      immediate: true,
    },
  },
  data() {
    return {
      selectBankBranchValue: '',
      selectBankValue: '',
      selectValue: '',
      showAreaPicker: false,
      showBankPicker: false,
      showbankBranchPicker: false,
      showAccountTypePicker: false,
      areaList: [],
      oriAreaList: [],
      bankList: [],
      oriBankList: [],
      bankBranchList: [],
      oriBankBranchList: [],
      accountTypeList: AccountTypeList,
      accountName: "",
      accountType: "个人",
      areaName: "",
      bankName: "",
      bankBranchName: "",
      accountNumber: "",
      contactPhone: "",
      certificateNumber: "",
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
    };
  },
  methods: {
    bankValueBranchChange(val) {
      this.bankBranchList = this.oriBankBranchList.filter(item => {
        if (val) {
          return item.bankBranchName.includes(val)
        } else {
          return item
        }
      })
    },
    bankValueChange(val) {
      this.bankList = this.oriBankList.filter(item => {
        if (val) {
          return item.bankName.includes(val)
        } else {
          return item
        }
      })
    },
    selectValueChange(val) {
      this.areaList = this.oriAreaList.filter(item => {
        if (val) {
          return item.areaName.includes(val)
        } else {
          return item
        }
      })
    },
    checkBankNumber(val) {
      return regExp.test(val);
    },
    phoneNumberRight(val) {
      return /^1[3-9]\d{9}$/.test(val);
    },
    checkDocument(value) {
      return reg.test(value);
    },
    onAccountTypeConfirm(value) {
      this.accountType = value;
      this.showAccountTypePicker = false;
    },
    onbankBranchConfirm(value) {
      this.bankBranchName = value;
      this.showbankBranchPicker = false;
      this.setBankBranchList()
    },
    onBankConfirm(value) {
      if (value !== this.bankName) {
        this.bankBranchName = ''
      }
      this.bankName = value;
      this.showBankPicker = false;
      this.setBankList()
    },
    onConfirm(value) {
      if (value !== this.areaName) {
        this.bankBranchName = ''
      }
      this.areaName = value;
      this.showAreaPicker = false;
      this.setAreaList()
    },
    setAreaList() {
      this.selectValue = ''
      this.areaList = Object.assign(this.oriAreaList)
    },
    setBankList() {
      this.selectBankValue = ''
      this.bankList = Object.assign(this.oriBankList)
    },
    setBankBranchList() {
      this.selectBankBranchValue = ''
      this.bankBranchList = Object.assign(this.oriBankBranchList)
    },
    onClickLeft() {
      if (this.$route.query.orderNum) {
        this.$router.push({
          path: 'reportCase',
          query: {
            orderNum: this.$route.query.orderNum,
            getReportingCaseDataFromCache: true
          }
        })
      } else {
        this.$router.push("/bankAccount");
      }

    },
    getAreaList() {
      return this.$get("/bank/account/area").then((res) => {
        this.areaList = res.data;
        this.oriAreaList = Object.assign(res.data)
      });
    },
    getBankList() {
      return this.$get("/bank/account/bank").then((res) => {
        this.bankList = res.data;
        this.oriBankList = Object.assign(this.bankList)
      });
    },
    getBankBranchList() {
      if (
        !this.areaName ||
        !this.bankName ||
        !this.areaList.length ||
        !this.bankList.length
      ) {
        return;
      }

      const params = {
        areaId: this.areaList.find((item) => item.areaName === this.areaName)
          .areaId,
        bankId: this.bankList.find((item) => item.bankName === this.bankName)
          .bankId,
      };
      this.$get("/bank/account/bankbranch", params).then((res) => {
        this.bankBranchList = res.data;
        this.oriBankBranchList = Object.assign(res.data)
      });
    },
    onSubmit() {
      const {
        accountName,
        accountType,
        areaName,
        bankName,
        bankBranchName,
        accountNumber,
        contactPhone,
        certificateNumber,
      } = this;
      const params = {
        accountName,
        accountType: getValue(AccountTypeList, accountType),
        areaName,
        bankName,
        bankBranchName,
        accountNumber,
        contactPhone,
        certificateNumber,
      };
      const url = this.hasBankId ? "/bank/account/update" : "/bank/account/add";
      if (this.hasBankId) {
        params.bankAccountId = this.bank.bankAccountId;
      }
      const message = this.hasBankId ? "编辑成功" : "新增成功";
      this.$post(url, params).then((res) => {
        this.$toast({
          message,
          duration: 800,
        });

        this.onClickLeft();
      });
    },
  },
  mounted() {
    if (this.hasBankId) {
      Promise.all([this.getAreaList(), this.getBankList()]).then(() => {
        this.accountName = this.bank.accountName;
        this.accountType = getLabel(AccountTypeList, this.bank.accountType * 1);
        this.areaName = this.bank.areaName;
        this.bankName = this.bank.bankName;
        this.bankBranchName = this.bank.bankBranchName;
        this.accountNumber = this.bank.accountNumber;
        this.contactPhone = this.bank.contactPhone;
        this.certificateNumber = this.bank.certificateNumber;
      });
    } else {
      this.getAreaList();
      this.getBankList();
    }
  },
};
</script>
<style scoped>
.editAccount {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
</style>
